import { Button, Form, Input, Spin, Select } from "antd";
import React, { useState, useEffect } from "react";
import { cateGet,CakeBatch } from "../../api/cake";
import RichText from "../../components/RichText";
import axios from "axios";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 19,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const CakePublic = () => {
  const [form] = Form.useForm();
  let [loading, setLoading] = useState(false);
  let [catelist, setCateList] = useState([]);

  useEffect(() => {
    cateGet().then((res) => {
      setCateList(res.data.results);
    });
  }, []);

  const onFinish = (values) => {
    console.log(values);
    // setLoading(true); //开启loadin
    let url = `https://h5.mcake.com/api/0434b49d1ac28f9d?cityId=641&page=1&bid=5`;
    axios({ url, headers: {
      'access-token': '768025e0ab736ed48a28300291aca2cc',
      'version': 'v1.0'
    } }).then((res) => {
      // console.log(res);
      CakeBatch(res.data.data.list,values)
    });
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="cateid"
          label="归属分类"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select placeholder="请选择商品归属分类">
            {catelist.map((item) => {
              return (
                <Option value={item.objectId} key={item.objectId}>
                  {item.catename}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="detail"
          label="商品详情"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <RichText />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            数据转存
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default CakePublic;
